<template>
	<view class="container" v-if="!$u.test.isEmpty(dataInfo)">
		<!-- <navigator open-type="navigateBack" hover-class="none">
			<image class="back" :src="$setting.imageUrl()+'CircleRight.png'"></image>
		</navigator> -->

		<u-swiper :list="dataInfo.detail.image" mode="number" indicator-pos="bottomRight" height="716"
			name="file_path"></u-swiper>

		<view class="con">
			<view class="seckill flex-space-between" v-if="ispresale">
				<view class="seckill-price flex-align-center">
					<view class="seckill-price-new"><text>￥</text>{{secKillSpecInfo.seckill_price}}</view>
					<view class="seckill-price-old">￥{{secKillSpecInfo.product_price}}</view>
				</view>
				<view class="seckill-tips">
					<view>秒杀</view>
					<countdown-presale ref='countdown' :config="countdownConfig"></countdown-presale>
				</view>
			</view>
			<view class="product bg-fff">
				<view class="product-price flex-align-center" v-if="!ispresale">
					<view class="product-price-new"><text>￥</text>{{specInfo.spec_form.product_price}}</view>
					<view class="product-price-old">￥{{specInfo.spec_form.line_price}}</view>
				</view>
				<!-- <view class="product-price flex-align-center" v-if="ispresale">
					<view class="product-price-new"><text>￥</text>{{secKillSpecInfo.seckill_price}}</view>
					<view class="product-price-old">￥{{secKillSpecInfo.product_price}}</view>
				</view> -->
				
				<view class="flex" style="justify-content: space-between;">
					<view class="product-name">
						<text class="redLable">{{smalllabel}}</text>{{dataInfo.detail.product_name}}</view>
					<view class="collect flex-column-center" @click="handleCollect"
						v-show="dataInfo.detail.isfollow == 0">
						<image :src="$setting.imageUrl()+'collect.png'"></image>
						<!-- <view>收藏</view> -->
					</view>
					<view class="collect flex-column-center collect-select" @click="handleCollect"
						v-show="dataInfo.detail.isfollow == 1">
						<u-icon name="heart-fill" size="36" :color="$setting.colorTheme()"></u-icon>
						<!-- <view>已收藏</view> -->
					</view>
				</view>
				<view class="product-selling">{{dataInfo.detail.selling_point}}</view>
				<view class="product-info flex-space-between">
					<view class="product-info-item">
						<view class="product-info-label">品牌</view>
						<view class="product-info-value">{{dataInfo.detail.brand_name}}</view>
					</view>
					<view class="product-info-line"></view>
					<view class="product-info-item">
						<view class="product-info-label">产国/产地</view>
						<view class="product-info-value">{{dataInfo.detail.yieldly}}</view>
					</view>
					<view class="product-info-line"></view>
					<view class="product-info-item">
						<view class="product-info-label">酒精度</view>
						<view class="product-info-value">{{dataInfo.detail.alcoholic_strength}}%vol</view>
					</view>
					<view class="product-info-line"></view>
					<view class="product-info-item">
						<view class="product-info-label">净含量</view>
						<view class="product-info-value">{{dataInfo.detail.net_content}}ML</view>
					</view>
				</view>
			</view>

			<view class="sku flex-space-between bg-fff" @click="sukShow = !sukShow"
				v-if="!$u.test.isEmpty(dataInfo.detail.product_multi_spec)">
				<view class="flex-align-center">
					<view class="sku-label">规格：</view>
					<view class="sku-value u-line-1">已选 {{handleSpecMateText()}}</view>
				</view>

				<u-icon name="arrow-right" size="32rpx" color="#333"></u-icon>
			</view>

			<view class="service bg-fff" @click="serviceShow = !serviceShow">
				<view class="service-time"
					:style="{background: 'url('+$setting.imageUrl()+'peisong_new.png) no-repeat', backgroundSize: '100%'}">
					{{sendTime}}分钟内送达</view>
				<view class="service-list flex-wrap">
					<view class="service-item flex-align-center" v-for="(item,index) in service" :key="index">
						<image :src="item.logo"></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view class="sku flex-space-between bg-fff" @click="jump('/pages/categoty/product/comment?product_id='+id)">
				<view class="flex-align-center">
					<view class="sku-label">评价({{dataInfo.detail.comment_data_count}})</view>
					<view class="sku-value u-line-1" v-if="dataInfo.detail.commentData.length > 0">{{dataInfo.detail.commentData[0].content}}</view>
				</view>

				<view class="flex-align-center">
					<view class="sku-label">全部</view>
					<u-icon name="arrow-right" size="32rpx" color="#333"></u-icon>
				</view>
			</view>
<!-- 
			<view class="shop bg-fff flex">
				<image class="shop-image" :src="dataInfo.detail.supplier.logos"></image>
				<view class="shop-con">
					<view class="flex-space-between">
						<view class="shop-name">{{dataInfo.detail.supplier.name}}</view>
						<view class="shop-score">店铺评分：<text>{{dataInfo.detail.supplier.server_score}}</text></view>
					</view>

					<view class="shop-category" style="margin-top: 18rpx;">主营品牌：{{dataInfo.detail.supplier.category_name}}</view>

					<view class="shop-category flex-space-between">
						<view>销量：{{dataInfo.detail.supplier.product_sales}}件 丨 {{dataInfo.detail.supplier.fav_count}}人关注</view>
						<b-u-button-theme-plain width="144rpx" height="48rpx" size="24rpx" @click="jump('/pages/shop/shop_info?shop_supplier_id='+dataInfo.detail.shop_supplier_id)">进店看看</b-u-button-theme-plain>
					</view>
				</view>
			</view> -->

			<view class="product-detail bg-fff">
				<view class="product-detail-title">产品详情</view>
				<u-parse :html="dataInfo.detail.content" :tag-style="{img: 'display:block'}"></u-parse>
			</view>

			<view class="product-detail bg-fff">
				<view :style="{height: isExpand ? 'auto' : '200rpx', overflow: 'hidden'}">
					<view class="product-detail-notice" v-for="(item,index) in notice" :key="index">
						<view class="flex-align-center">
							<image class="product-detail-logo" v-if="!$u.test.isEmpty(item.logo)" :src="item.logo" mode="widthFix">
							</image>
							<view class="product-detail-name">{{item.name}}</view>
						</view>
						<view style="white-space: pre-wrap;margin-top: 15rpx;">{{item.description}}</view>
					</view>
				</view>
				
				<view class="flex-center expand" @click="isExpand = !isExpand">
					<view>展开阅读全文</view>
					<u-icon :name="isExpand ? 'arrow-up' : 'arrow-down'"></u-icon>
				</view>
			</view>
			
		</view>

		<view style="height: 120rpx;"></view>
		<safe-area-inset-bottom></safe-area-inset-bottom>

		<view class="fixed-bottom bg-fff">
			<view class="fixed-bottom-con flex-space-between">
				<view class="fixed-bottom-left flex-space-between">
					<view class="flex-column-center" @click="jumpSwitch('/pages/index/index')">
						<image class="fixed-bottom-icon" :src="$setting.imageUrl()+'Storefront.png'"></image>
						<view class="fixed-bottom-name">首页</view>
					</view>
					<view>
						<button class="u-reset-button" @click="$store.dispatch('getCustomer')">
							<view class="flex-column-center">
								<image class="fixed-bottom-icon" :src="$setting.imageUrl()+'kefu.png'"></image>
								<view class="fixed-bottom-name">客服</view>
							</view>
						</button>
					</view>
					<!-- <view class="flex-column-center" @click="jumpSwitch('/pages/cart/cart')" style="position: relative;">
						<image class="fixed-bottom-icon" :src="$setting.imageUrl()+'ShoppingCartSimple.png'"></image>
						<view class="fixed-bottom-name">购物车</view>
					
						<u-badge size="mini" type="error" :offset="[-10,-10]" :count="dataInfo.cart_total_num"></u-badge>
					</view> -->
				</view>
				<view class="fixed-bottom-right flex-space-between">
					<b-u-button-theme width="550rpx" height="70rpx" size="26rpx" @click="send" v-if="specInfo.spec_form.stock_num > 0">{{checkbusiness?"立即购买":"预约购买"}}</b-u-button-theme>
					<b-u-button-grey width="550rpx" height="70rpx" size="26rpx" v-if="specInfo.spec_form.stock_num <= 0">已售罄</b-u-button-grey>
				</view>
				<!-- <view class="fixed-bottom-right flex-space-between" v-if="ispresale">
					<b-u-button-theme width="460rpx" height="70rpx" size="26rpx" @click="send" v-if="secKillSpecInfo.seckill_stock > 0 && handleSeckillTime()">{{checkbusiness?"立即购买":"预约购买"}}</b-u-button-theme>
					<b-u-button-grey width="460rpx" height="70rpx" size="26rpx" v-if="secKillSpecInfo.seckill_stock > 0 && !handleSeckillTime()">暂未开始</b-u-button-grey>
					<b-u-button-grey width="460rpx" height="70rpx" size="26rpx" v-if="secKillSpecInfo.seckill_stock <= 0">已售罄</b-u-button-grey>
				</view>
				<view class="fixed-bottom-right flex-space-between" v-if="!ispresale">
					<b-u-button-theme-plain width="220rpx" height="70rpx" size="26rpx" @click="addCart">加入购物车</b-u-button-theme-plain>
					<b-u-button-theme width="220rpx" height="70rpx" size="26rpx" @click="send" v-if="specInfo.spec_form.stock_num > 0">{{checkbusiness?"立即购买":"预约购买"}}</b-u-button-theme>
					<b-u-button-grey width="220rpx" height="70rpx" size="26rpx" v-if="specInfo.spec_form.stock_num <= 0">已售罄</b-u-button-grey>
				</view> -->
			</view>
			<safe-area-inset-bottom></safe-area-inset-bottom>
		</view>
		
		<u-popup v-model="sukShow" mode="bottom" border-radius="24" closeable close-icon="close-circle"
			close-icon-size="40">
			<view class="popup">
				<view class="popup-product flex" v-if="!ispresale">
					<image class="popup-product-image" :src="specInfo.spec_form.image_path" @click="handlePreviewImage(specInfo.spec_form.image_path)"></image>
					<view class="popup-product-con">
						<!-- <view class="popup-product-name u-line-2">{{specInfo.spec_form.product_no}}</view> -->
						<view class="popup-product-name u-line-2">{{dataInfo.detail.product_name}}</view>
						<view class="popup-product-price"><text>￥</text>{{specInfo.spec_form.product_price}}</view>
						<view class="popup-product-price-old"><text>￥</text>{{specInfo.spec_form.line_price}}</view>
					</view>
				</view>
				<view class="popup-product flex" v-if="ispresale">
					<image class="popup-product-image" :src="secKillSpecInfo.productSku.image.file_path || dataInfo.detail.product_image" @click="handlePreviewImage(secKillSpecInfo.productSku.image.file_path || dataInfo.detail.product_image)"></image>
					<view class="popup-product-con">
						<!-- <view class="popup-product-name u-line-2">{{secKillSpecInfo.productSku.product_no}}</view> -->
						<view class="popup-product-name u-line-2">{{dataInfo.detail.product_name}}</view>
						<view class="popup-product-price"><text>￥</text>{{secKillSpecInfo.seckill_price}}</view>
					</view>
				</view>
				

				<view v-if="!$u.test.isEmpty(dataInfo.detail.product_multi_spec)">
					<view class="popup-sku" v-for="(item,index) in activeInfo.specData.spec_attr" :key="index">
						<view class="popup-sku-title">{{item.group_name}}</view>
						<view class="popup-sku-list flex-wrap">
							<view class="popup-sku-item" :class="{'popup-sku-item-select': handleSpecMate(it.item_id)}"
								v-for="(it,idx) in item.spec_items" :key="idx" @click="handleSelectSpec(index, it.item_id)">
								{{it.spec_value}}</view>
						</view>
					</view>
				</view>

				<view class="popup-num flex-space-between">
					<view class="popup-num-title">购买数量</view>

					<view class="b-number-box" v-if="ispresale">
						<u-number-box v-model="product_num" :min="1" disabled-input :long-press="false" :max="secKillSpecInfo.seckill_stock"></u-number-box>
						<!-- <b-number-box v-model="product_num" :max="secKillSpecInfo.seckill_stock"></b-number-box> -->
					</view>
					<view class="b-number-box" v-if="!ispresale">
						<u-number-box v-if="restricted==0" v-model="product_num" :min="1" disabled-input :long-press="false" :max="specInfo.spec_form.stock_num"></u-number-box>
						<u-number-box v-else v-model="product_num" :min="1" disabled-input :long-press="false" :max="1"></u-number-box>
						<!-- <b-number-box v-model="product_num" :max="specInfo.spec_form.stock_num"></b-number-box> -->
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="serviceShow" mode="bottom" border-radius="24" closeable close-icon="close-circle"
			z-index="11000" close-icon-size="40">
			<view class="popup-service">
				<view class="popup-service-title">服务说明</view>
				<view class="popup-service-list">
					<view class="popup-service-list-title">{{serviceConfig}}</view>
					<view class="popup-service-item" v-for="(item,index) in service" :key="index">
						<view class="flex">
							<image class="popup-service-image" :src="item.logo"></image>
							<view class="popup-service-name">{{item.name}}</view>
						</view>
						<view class="popup-service-describe">{{item.describe}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<BusinessBox v-if="isBusinessBox" :businessshow="checkbusiness" :businesstxt="businesstxt" :boxbottom="20" :bottom="boHeight"></BusinessBox>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeInfo:{},
				id: '',
				dataInfo: {
					// detail: {
					// 	product_multi_spec: {
					// 		spec_attr: [],
					// 	}
					// },
					// cart_total_num: 0
				},
				service: [],
				notice: {},
				sendTime: '',
				sukShow: false,
				serviceShow: false,
				specIds: "0",
				specInfo: {},
				product_num: 1,
				is_virtual: 1,
				ispresale: false,
				countdownConfig: {
					endstamp: '',
					startstamp: '',
				},
				secKillSpecInfo: {},
				isExpand: false,
				serviceConfig: "",
				userInfo: {},
				share:{
					title:'',
					imageUrl:'',
				},
				checkbusiness:true,
				businesstxt:'',
				activity_product_id:'',
				smalllabel:'',
				boHeight:55,
				isBusinessBox:false,
				restricted:0
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.activity_product_id = options.activity_product_id
			this.restricted = options.restricted
			if (!uni.$u.test.isEmpty(options.scene)) {
				let sceneInfo = this.getScene(options.scene);
				this.id = sceneInfo.product_id;
			}
			
			this.getHttp();
		},
		async onShow() {
			await this.$onLaunched
			this.getUserInfo();
		},
		onReady() {
			this.$nextTick(() => {
				this.getHeight()
			})
		},
		onShareTimeline() {
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods: {
			getHeight() {
				setTimeout(() => {
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.fixed-bottom').boundingClientRect(rect => {
						this.boHeight = rect?rect.height:55
						this.isBusinessBox = true
					}).exec();	
					})
                }, 300)
   			 },
			getCityBusiness() {
				let self = this;
				uni.$u.api.getCityBusiness({}).then(function(res){
					self.checkbusiness = res.checkbusiness
					self.businesstxt = res.businesstxt
				})
			},
			// 处理小程序码参数
			getScene(scene) {
				let scene_new = decodeURIComponent(scene);
				let info = {};
				var list = scene_new.split("&");
				for (var i = 0; i < list.length; i++) {
					info[list[i].split(":")[0]] = list[i].split(":")[1];
				}
				return info;
			},
			handleSeckillTime() {
				let time = (new Date()).getTime() / 1000;
				
				if(time >= this.dataInfo.detail.secKill.active.start_time) {
					return true;
				} else {
					return false;
				}
			},
			handlePreviewImage(url) {
				uni.previewImage({
					urls: [url],
				});
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			jumpSwitch(url) {
				uni.switchTab({
					url: url
				})
			},
			handleCollect() {
				uni.$u.api.postFavorite({
					pid: this.activity_product_id,
					type: 20
				}).then(res => {
					this.dataInfo.detail.isfollow == 1 ? this.dataInfo.detail.isfollow = 0 : this.dataInfo.detail
						.isfollow = 1;
					if (this.dataInfo.detail.isfollow == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
					}
					if (this.dataInfo.detail.isfollow == 1) {
						uni.showToast({
							title: "收藏成功",
							icon: "none"
						})
					}
				})
			},
			addCart() {
				if (!this.sukShow) {
					this.sukShow = true;
					return;
				}
				
				if(this.specInfo.spec_form.stock_num <= 0) {
					uni.showToast({
						title: "库存不足",
						icon: 'none',
					})
					return ;
				}
				
				uni.$u.api.postOrderCart({
					product_id: this.dataInfo.detail.product_id,
					total_num: this.product_num,
					spec_sku_id: this.specIds,
				}).then(res => {
					uni.showToast({
						title: "加入购物车成功"
					})
					
					uni.$u.api.getProductDetail({
						product_id: this.activity_product_id,
						visitcode: this.getVisitcode()
					}).then(res => {
						this.dataInfo.cart_total_num = res.cart_total_num;
					})
					
					this.sukShow = false;
				})
			},
			send() {
				if(!this.userInfo.userInfo || !this.userInfo.userInfo.mobile) {
					this.jump("/pages/login/login");
					return;
				}
				
				if (!this.sukShow) {
					this.sukShow = true;
					return;
				}
				console.log(this.specInfo,'this.specInfo')
				if(this.ispresale == true) {
					if(this.secKillSpecInfo.seckill_stock <= 0) {
						uni.showToast({
							title: "库存不足",
							icon: 'none',
						})
						return ;
					}
					uni.navigateTo({
						url: "/pages/cart/settle/settle?seckill_product_id=" + this.dataInfo.detail.secKill.seckill_product_id +
							"&product_num=" + this.product_num + "&product_sku_id=" + this.specIds + "&order_type=seckill&seckill_product_sku_id="+this.seckill_product_sku_id
					})
				} else {
					if(this.specInfo.spec_form.stock_num <= 0) {
						uni.showToast({
							title: "库存不足",
							icon: 'none',
						})
						return ;
					}
					uni.navigateTo({
						url: "/pages/cart/settle/settle?activity_product_id=" + this.activeInfo.detail.activity_product_id +
							"&product_num=" + this.product_num + "&product_sku_id=" + this.specIds + "&order_type=activity" + "&activity_product_sku_id=" + this.specInfo.spec_form.activity_product_sku_id
					})
				}
			},
			handleSelectSpec(index, id) {
				let ids = this.specIds.split("_");
				ids[index] = id;
				this.specIds = ids.join("_");
				console.log('handleSelectSpec',this.specIds,'specIds',this.activeInfo.specData.spec_list)
				// this.activeInfo.specData.spec_list.forEach((item, index) => {
				// 	if (item.spec_sku_id == this.specIds) {
				// 		this.specInfo = item;
				// 	}
				// })
				this.specInfo = this.activeInfo.specData.spec_list.filter(item=>item.spec_sku_id == this.specIds)[0]
				let priceSkuInfo= this.activeInfo.detail.productSku.filter(item=>item.productSku.spec_sku_id == this.specIds)[0]
				console.log(this.specInfo,'specInfo',priceSkuInfo,'priceSkuInfo')
				this.specInfo.spec_form.product_price = priceSkuInfo.activity_price
				this.specInfo.spec_form.activity_product_sku_id = priceSkuInfo.activity_product_sku_id
				// this.dataInfo.detail.product_multi_spec.spec_list.forEach((item, index) => {
				// 	if (item.spec_sku_id == this.specIds) {
				// 		this.specInfo = item;
				// 	}
				// })
				
				// this.handleSeckillSku();
			},
			handleSpecMateText() {
				let text = [];
				let ids = this.specIds.split("_");
				this.activeInfo.specData.spec_attr.forEach((item,index) => {
					item.spec_items.forEach((it,idx) => {
						ids.forEach((i,ix) => {
							if(it.item_id == i) {
								text.push(it.spec_value);
							}
						})
					})
				})
				
				return text.join('/');
			},
			handleSpecMate(id) {
				let back = false;
				let ids = this.specIds.split("_");
				ids.forEach((item, index) => {
					if (id == item) {
						back = true;
					}
				})
				return back;
			},
			handleSeckillSku() {
				this.seckill_product_sku_id = '';
				this.secKillSpecInfo = {};
				let ids = this.specIds.split("_");
				this.dataInfo.detail.secKill.seckillSku.forEach((item,index) => {
					if(item.productSku.spec_sku_id == this.specIds) {
						this.seckill_product_sku_id = item.seckill_product_sku_id;
						
						this.secKillSpecInfo = item;
					}
				})
				if(uni.$u.test.isEmpty(this.secKillSpecInfo)) {
					this.secKillSpecInfo = this.dataInfo.detail.secKill.seckillSku[0];
				}
			},
			getProductDetail() {
				let self = this
				uni.$u.api.getProductDetail({
					product_id: this.id,
					visitcode: this.getVisitcode()
				}).then(res => {
					this.dataInfo = res;
					let listimg = this.dataInfo.detail.share_img
					this.share.title = this.dataInfo.detail.share_title?this.dataInfo.detail.share_title:uni.getStorageSync('shareTitle')
					if(listimg){
						this.share.imageUrl = listimg[0].file_path
					}
					if (!uni.$u.test.isEmpty(this.dataInfo.detail.product_multi_spec)) {
						this.specIds = this.dataInfo.detail.product_multi_spec.spec_list[0].spec_sku_id;
						this.specInfo = this.dataInfo.detail.product_multi_spec.spec_list[0];
					} else {
						this.specInfo.spec_form = {
							image_path: this.dataInfo.detail.product_image,
							product_price: this.dataInfo.detail.product_price,
							product_no: this.dataInfo.detail.product_name,
							stock_num: this.dataInfo.detail.product_stock,
							line_price: this.dataInfo.detail.product_sku.line_price,
						}
					}
					
					if (this.dataInfo.detail.secKill && this.dataInfo.detail.secKill != null) {
						this.ispresale = true;
						this.countdownConfig.endstamp = this.dataInfo.detail.secKill.active.end_time;
						this.countdownConfig.startstamp = this.dataInfo.detail.secKill.active.start_time;
						
						this.handleSeckillSku();
						this.handleSeckillTime();
					}
					this.is_virtual = this.dataInfo.detail.is_virtual;
					
					uni.$u.api.getProductDetailActive({
						activity_product_id: this.activity_product_id
					}).then(res => {
						console.log(res,'activity_product_id')
						this.activeInfo = res
						this.specInfo.spec_form.line_price =  this.activeInfo.detail.line_price
						this.specInfo.spec_form.product_price = this.activeInfo.detail.activity_price
						this.specInfo.spec_form.activity_product_sku_id = this.activeInfo.detail.productSku[0].activity_product_sku_id
						let spec_attr =  this.activeInfo.specData.spec_attr 
						let skuList = this.activeInfo.skuList
						console.log(JSON.stringify(spec_attr),JSON.stringify(skuList),'spec_attrskuList')
						spec_attr.forEach(attr => {
						    // 过滤掉不在 skuList 中的 item_id
						    attr.spec_items = attr.spec_items.filter(item => {
						        // 检查 item_id 是否在 skuList 中
						        return skuList.some(sku => {
						            return sku.includes(item.item_id.toString());
						        });
						    });
						});
						console.log(spec_attr,'spec_attrfinal')
						this.activeInfo.specData.spec_attr = spec_attr
						
						this.smalllabel = this.activeInfo.active.label
					})
				})
			},
			getListData() {
				uni.$u.api.getListData({
					type: 0
				}).then(res => {
					this.service = res;
				})
				uni.$u.api.getListData({
					type: 1
				}).then(res => {
					this.notice = res;
				})
			},
			getConfigData() {
				uni.$u.api.getConfigData({
					type: 'sendTime'
				}).then(res => {
					this.sendTime = res.list[0].value;
				})
				uni.$u.api.getConfigData({
					type: 'service'
				}).then(res => {
					this.serviceConfig = res.list[0].content;
				})
			},
			getUserInfo() {
				uni.$u.api.userInfo().then(res => {
					this.userInfo = res;
				})
			},
			getHttp() {
				this.getCityBusiness();
				this.getProductDetail();
				this.getListData();
				this.getConfigData();
				this.getUserInfo();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		.redLable{
			background-color: #BB0024;
			padding: 4rpx 15rpx;
			color: #fff;
			border-radius: 10rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
		}
		.back {
			position: fixed;
			left: 28rpx;
			top: 108rpx;
			z-index: 99;
			width: 48rpx;
			height: 48rpx;
			transform: rotate(180deg);
		}

		.con {
			padding: 20rpx 30rpx;
			
			.seckill {
				border-radius: 16rpx 16rpx 0px 0px;
				background: linear-gradient(90deg, #BB0024 0%, #FF4E4E 100%);
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 24rpx 38rpx 24rpx 40rpx;
				margin-bottom: -16rpx;
				
				/deep/.box {
					background: #FFFFFF;
					color: #E80D0D;
				}
				
				.seckill-price {
					color: #FFFFFF;
					
					.seckill-price-new {
						font-size: 44rpx;
						font-weight: bold;
						
						text {
							font-size: 24rpx;
						}
					}
					
					.seckill-price-old {
						text-decoration: line-through;
						color: rgba(255, 255, 255, 0.8);
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
				
				.seckill-tips {
					text-align: right;
				}
			}
			
			.product {
				padding: 20rpx;
				border-radius: 16rpx;

				.product-price {
					margin-bottom: 10rpx;

					.product-price-new {
						color: $uni-color-theme;
						font-size: 44rpx;
						font-weight: bold;

						text {
							font-size: 24rpx;
						}
					}

					.product-price-old {
						font-size: 24rpx;
						text-decoration: line-through;
						color: #CCCCCC;
						margin-left: 10rpx;
					}
				}

				.product-name {
					font-size: 32rpx;
					color: #111111;
					font-weight: bold;
					margin-right: 100rpx;
				}

				.collect {
					font-size: 24rpx;
					color: #9E9E9E;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.collect-select {
					color: $uni-color-theme;
				}

				.product-selling {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #666666;
				}

				.product-info {
					margin-top: 32rpx;
					border-radius: 16rpx;
					background: #FEF1F1;
					padding: 26rpx 56rpx;

					.product-info-item {
						text-align: center;

						.product-info-label {
							font-size: 24rpx;
							color: #666666;
						}

						.product-info-value {
							font-size: 28rpx;
							color: #111111;
							margin-top: 12rpx;
						}
					}

					.product-info-line {
						height: 32rpx;
						width: 1px;
						background: rgba(232, 13, 13, 0.1);
					}
				}
			}

			.sku {
				border-radius: 16rpx;
				padding: 32rpx 22rpx;
				margin-top: 24rpx;

				.sku-label {
					font-size: 28rpx;
					color: #666666;
				}

				.sku-value {
					width: 350rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #111111;
				}
			}

			.service {
				margin-top: 20rpx;
				border-radius: 16px;

				.service-time {
					height: 70rpx;
					font-size: 24rpx;
					color: $uni-color-theme;
					text-align: right;
					padding: 10rpx 15rpx;
				}

				.service-list {
					padding: 20rpx;

					.service-item {
						font-size: 20rpx;
						color: #666666;
						margin: 0 20rpx 20rpx 0;

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}

			.shop {
				padding: 26rpx 22rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.shop-image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 16rpx;
				}

				.shop-con {
					flex: 1;
					margin-left: 16rpx;

					.shop-name {
						font-size: 28rpx;
						color: #111111;
					}

					.shop-score {
						font-size: 28rpx;

						text {
							color: $uni-color-theme;
						}
					}

					.shop-category {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.product-detail {
				padding: 20rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.product-detail-title {
					font-size: 28rpx;
					color: #111111;
					margin-bottom: 20rpx;
				}
				
				.product-detail-notice + .product-detail-notice {
					margin-top: 20rpx;
				}
				
				.product-detail-logo {
					width: 40rpx;
					height: 40rpx;
				}
				
				.product-detail-name {
					font-size: 28rpx;
					color: #111111;
					font-weight: bold;
					margin-left: 20rpx;
				}
				
				textarea {
					margin-top: 20rpx;
				}

				.expand {
					margin-top: 50rpx;
					
					view {
						margin-right: 10rpx;
					}
				}
			}
		}


		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10089;
			width: 100%;

			.fixed-bottom-con {
				padding: 16rpx 30rpx;
				
				.fixed-bottom-left {
					width: 200rpx;
					margin-right: 30rpx;
				}
				
				.fixed-bottom-right {
					flex: 1;
				}
				
				.fixed-bottom-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.fixed-bottom-name {
					font-size: 22rpx;
					color: #333333;
				}
			}
		}


		.popup {
			padding: 40rpx 30rpx;

			.popup-product {

				.popup-product-image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
				}

				.popup-product-con {
					margin-left: 24rpx;
					flex: 1;
					
					.popup-product-name {
						width: 90%;
						font-size: 28rpx;
						color: #111111;
					}

					.popup-product-price {
						margin-top: 8rpx;
						font-size: 36rpx;
						color: $uni-color-theme;

						text {
							font-size: 24rpx;
						}
					}
					
					.popup-product-price-old {
						font-size: 24rpx;
						text-decoration: line-through;
						color: #CCCCCC;
						margin-left: 10rpx;
					}
				}
			}

			.popup-sku {
				margin-top: 28rpx;

				.popup-sku-title {
					font-size: 28rpx;
					color: #111111;
				}

				.popup-sku-list {
					margin-top: 28rpx;

					.popup-sku-item {
						background: #E1E1E1;
						border-radius: 16rpx;
						font-size: 28rpx;
						color: #666666;
						padding: 20rpx 26rpx;
						margin: 0 24rpx 24rpx 0;
					}

					.popup-sku-item-select {
						background: $uni-color-theme;
						color: #FFFFFF;
					}
				}
			}

			.popup-num {
				margin-top: 76rpx;
				padding-bottom: 300rpx;

				.popup-num-title {
					font-size: 28rpx;
					color: #111111;
				}
			}
		}

		.popup-service {

			.popup-service-title {
				font-size: 36rpx;
				border-bottom: 20rpx solid #F6F6F6;
				text-align: center;
				padding: 34rpx 0;
			}

			.popup-service-list {
				padding: 30rpx;

				.popup-service-list-title {
					font-size: 24rpx;
					color: #111111;
					// text-align: center;
					margin-bottom: 36rpx;
				}
				
				.popup-service-item {
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					background: #F6F6F6;
					padding: 26rpx 22rpx;

					.popup-service-image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 5rpx;
					}

					.popup-service-name {
						font-size: 28rpx;
						color: #111111;
					}

					.popup-service-describe {
						font-size: 20rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>